<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 

            iphone4 320*480px   640px =2倍
            iphone5 320*568px   640px=2倍
            iphone678 375px     750px=2倍(用的最多)
            iphoneplus 414px    1242px=3倍

        设计图
            750px html{font-size:26.66vw}
            640px html{font-size:31.25vw}



        1，设计图的宽高/设备像素比
            375px转成rem
            44转成rem
            等比例
            font-size:不能是一个固定值
            375px=100vw 1vw=3.75px 1rem=100px=26.66vw


            要求
                现在设计图的宽度是640px
                html{
                    font-size:100px;
                   100px?= vw
                }
                header{
                    width:640px; height:88px;
                    要求640px等于多少rem;并且实现等比缩放
                }

            
     -->
     <link rel="stylesheet" href="style.css">
     <style>
         html{
             font-size:26.66vw;
             /* 100px==26.66vw 参照设计图*/
             /* 方便计算 px转成 vw 把屏幕宽度分成100份*/
         }
         header{
             width:3.75rem; height:0.44rem; background: #298ccf;
             /* 375px转成rem */
         }
         nav{
             width:3.75rem; height:0.35rem;
             background: yellow;
         }
         header ul{display: flex;}
         header ul li{
             width:.64rem; height:.25rem;
             /* alt+Z */
         }
     </style>
</head>
<body>
    <header>
        <ul>
            <li><a href="#">热点</a></li>
            <li><a href="#">排行</a></li>
        </ul>
    </header>
    <nav></nav>
</body>
</html>